<template>
  <div class="right">

    <div class="wdsc select">
      <div class="tp af">
        <div class="lf">
          <div class="mc" :style="'background:url(https://exam.zhonghaiqihang.com'+title.gr.avatar+') no-repeat 0 0/274px 265px'"></div>
          <img :src="'https://exam.zhonghaiqihang.com/'+title.gr.avatar" width="100px" height="100px" class="tx">
          <p class="nm">{{title.gr.username}}</p>
          <p class="zh">账号：{{title.gr.name}}</p>
        </div>
        <div class="rt">
          <h4>我的钱包<a href="javascript:;" class="jftca"><span></span>积分规则</a></h4>
          <ul class="jf af">
            <li class="li1"><img src="~/assets/img/wdsc1.png">
              <p class="p1">{{title.sj.giveScore}}</p>
              <p class="p2">赠送积分</p>
            </li>
            <li class="li2"><img src="~/assets/img/wdsc2.png">
              <p class="p1">{{title.sj.totalScore}}</p>
              <p class="p2">累计积分</p>
            </li>
            <li class="li3"><img src="~/assets/img/wdsc3.png">
              <p class="p1">{{title.sj.useScore}}</p>
              <p class="p2">已使用积分</p>
            </li>
            <li class="li4"><img src="~/assets/img/wdsc4.png">
              <p class="p1">{{title.sj.surplusScore}}</p>
              <p class="p2">剩余积分</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="wdqb">
        <div class="tp af">
          <h4>积分查询</h4>
          <ul class="af">
            <li class="li1" :class="select==0?'select':''" @mouseover="qh(0)"><span></span>
              <p>赠送积分</p>
            </li>
            <li class="li3" :class="select==2?'select':''" @mouseover="qh(2)"><span></span>
              <p>已使用积分</p>
            </li>

          </ul>
        </div>
        <div class="ct">
          <div class="ct1 select">
            <h5>积分赠送记录</h5>
            <table class="tb1">
              <tr class="tr1">
                <th class="th1">序号</th>
                <th class="th2">时间</th>
                <th class="th3">赠送积分数</th>
              </tr>
              <tr v-for="(data,id) in title.zsjf.giveScoreLogRes?title.zsjf.giveScoreLogRes.slice(sl3*10,(sl3+1)*10):[]" :key="id">
                <td class="th1 td1">{{id+1}}</td>
                <td class="th2 td2">{{data.createtime}}</td>
                <td class="th3 td3">{{data.scorenum}}</td>
              </tr>
            </table>
            <div class="zsjf" :class="title.zsjf.giveScoreLogRes?'':'select'">
              无积分赠送记录
            </div>
            <div class="dba" :class="title.zsjf.countNum?'':'select'"  :style="title.ysy.countNum?'':'display:none'">
              <span>{{title.zsjf.countNum}}条</span>
              <a href="javascript:;" class="syy2">上一页</a>
              <a href="javascript:;" v-for="(i,id) in sl2" :class="sl4==id?'':'select'" @click="qh3(id)">{{i}}</a>
              <a href="javascript:;" class="xyy2">下一页</a>
            </div>
          </div>
          <div class="ct2">
            <h5>累计积分记录</h5>
            <table class="tb2">
              <tr class="tr1">
                <th class="th1">序号</th>
                <th class="th2">积分来源</th>
                <th class="th3">积分变化</th>
                <th class="th4">日期</th>
              </tr>
              <tr v-for="(data,id) in title.ysy.useScoreLogRes?title.ysy.useScoreLogRes.slice(sl3*10,(sl3+1)*10):[]" :key="id">
                <td class="th1 td1">{{id+1}}</td>
                <td class="th2 td2">{{data.servicename}}</td>
                <td class="th3 td3">{{data.payscore}}</td>
                <td class="th4 td4">{{data.buytime}}</td>
              </tr>
            </table>
            <div class="dba" :class="title.ysy.countNum?'':'select'" :style="title.ysy.countNum?'':'display:none'">
              <span>{{title.ysy.countNum}}条</span>
              <a href="javascript:;" class="syy" @click="syy">上一页</a>
              <a href="javascript:;" v-for="(i,id) in sl5" :class="sl3==id?'select':''" @click="qh2(id)">{{i}}</a>
              <a href="javascript:;" class="xyy" @click="xyy">下一页</a>
            </div>
            <div class="zsjf" :class="title.ysy.useScoreLogRes?'':'select'">
              无积分使用记录
            </div>
          </div>
        </div>
      </div>


    </div>

    <div class="tc">
      <span>×</span>
      {{tcmsg}}
    </div>
    <div class="gmtc" :class="goumai.select==0?'':'select'">
      <div class="ct">
        <h3>{{goumai.title}}(展示位)</h3>
        <p class="p1"><span>{{goumai.jifen}}</span>积分</p>
        <p class="p2">{{goumai.title}}(展示位)</p>
        <p class="p3">当前拥有积分:{{goumai.userjf}}</p>
        <a href="javascript:;" class="ljgm" @click="gmjf(title.id,goumai.id)">立即购买</a>
        <a href="javascript:;" class="close" @click="gmgb()"></a>
      </div>
    </div>
    <div class="jfgztc">
      <div class="jfct">
        <div class="nr">
          <h4>积分规则说明</h4>
          <div>
            <h5 >一、积分获得 </h5>
            <p style="margin-top: 15px">1、首次登陆获得；</p>
            <p>（1）首次登录后完善个人信息，获赠200积分；</p>
            <p>（2）首次登陆未完善个人信息，之后填写完成个人信息，不再获赠200积分。</p>
            <p style="margin-top: 20px">2、按员工个人每月业绩达成比例获得；</p>
            <p>（1）每月业绩目标达成，超出目标业绩部分按5%计算积分；</p>
            <p>（2）每月业绩目标达成，完成目标业绩部分按3%计算积分；</p>
            <p>（3）每月业绩目标未达成，取得业绩按3%计算积分。</p>
            <p>注：积分计算保留到个位，小数点后省略。</p>
            <p class="p2" style="margin-top: 10px">例1：业绩目标达成，A员工入职满12个月，业绩为6万元（业绩目标为4万元），业绩目标部分获得积分为：<br>40000×3%＝1200积分；超出业绩目标部分为2万元，超出业绩目标部分获得积分为：20000×5%＝1000积分；因此，A员工应获得积分为：1200＋1000＝2200积分。<br/>
              例2：业绩目标未达成，B员工入职满12个月，业绩为3万元（业绩目标为4万元），B员工获得积分为：30000×3%＝900积分，因此，B员工应获得积分为：900积分。</p>
            <p style="margin-top: 18px">3、其他获得积分方式，突出贡献，获得积分100-1000积分。</p>
            <p>（1）提出合理、可行性建议或意见，利于公司长远发展；</p>
            <p>（2）推荐人才，推荐的人员入职后工作努力、敬业、积极向上、具有团队精神。</p>
          </div>
          <div>
            <h5 style="margin-top: 10px">二、积分扣除</h5>
            <p style="margin-top: 10px">1、业绩数据信息录入错误，一条信息录入错误扣除10积分，两条信息录入错误扣除20积分，以此类推，以信息修改记录为准；（同一条信息修改多次，只扣一次10积分）</p>
            <p>2、CC对话：（以下每项：每次扣除10积分）</p>
            <p>（1）漏接电话；</p>
            <p>（2）态度不友好；</p>
            <p>（3）不解答，直接要微信或电话。</p>
          </div>
          <div>
            <h5>三、积分使用</h5>
            <p style="margin-top: 15px">1、员工积分，可以累积，不清零，长期有效；</p>
            <p>2、员工积分不能兑换现金，不可转让；</p>
            <p>3、每月15日前系统按员工上月业绩金额兑换积分；</p>
            <p>4、购买展示位步骤：登陆服务者中心——点击我要购买——进入展示位商城——选择要购买的展示位——点击购买；</p>
            <p>5、每个展示位有效期为5天，购买成功后即刻生效，周末不顺延，无法取消或更换；</p>
            <p>6、一人可同时购买多个展示位。</p>
          </div>


        </div>
        <a href="javascript:;" class="close"></a>
      </div>

    </div>


  </div>
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
  export default {
    props: ['foobar'],
    data () {
      return {
        select:0,
        title:null,
        id:'',
        nihao:'你好呀',
        sl2:[1],
        sl5:[1],
        sl3:0,
        sl4:0,
        tcmsg:'',
        tcmsg1:['收藏成功',''],
        tcmsg2:'取消收藏成功',
        selenv:false,
        grzx:{
          bj:'编辑'
        },
        title:null,
        fuwu:1,
        shuju1:{
          one:0,
          two:0,
          three:0,
          four:0,
          five:0
        },
        goumai:{
          title:'',
          jifen:0,
          userjf:0,
          select:0,
          id:0
        }

      }
    },
    async asyncData ({req,params,query}){

    let a = req.headers.cookie;
    let cookie = '';
    if(a.indexOf('userinfoRes')!=-1){
      let b = a.split('userinfoRes=');
      let c = b[1].split(';');
      cookie = c[0];
    }
    let gr = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/userCenterIndexData?userid=`+cookie);
    let nh4 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/giveScoreLogData?userid=`+cookie);
    let nh3 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/giveScoreLogData?userid=`+cookie);
    let nh5 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/useScoreLogData?userid=`+cookie);

    let data  = {gr:gr.data,zsjf:nh4.data,id:cookie,ysy:nh5.data,sj:nh3.data};
    return { title: data}
  }
  ,
    mounted:function(){
      if(this.title.gr == 'go_signin'){
        this.$router.push('/Login');
        setCookie('userinfoRes','',-1);
      }else if(this.title.gr == 'userid_error'){
        this.$router.push('/Login');
        setCookie('userinfoRes','',-1);
      }else if(this.title.gr == 'userinfo_is_null'){
        this.$router.push('/Login');
        setCookie('userinfoRes','',-1);
      }else if(this.title.gr == 'userinfo_banuse'){
        this.$router.push('/Login');
        setCookie('userinfoRes','',-1);
      }
      else if(this.title.gr == 'serviceid_is_null'){
        window.open('/Mall',_self);
      } else if(this.title.gr == 'serviceid_error'){
        window.open('/Mall',_self);
      }else if(this.title.gr == 'serviceinfo_is_null'){
        window.open('/Mall',_self);
      }else if(this.title.gr == 'serviceinfo_banuse'){
        window.open('/Mall',_self);
      }

      $('header .content .rt a').removeClass('select');
      $('header .content .rt a.a5').addClass('select');
      var nb =  Math.ceil(this.title.ysy.countNum/10);
      for (let i=1;i<nb+1;i++){
        if(i>1){
          this.sl5.push(i);
        }
      }
      var nb1 =  Math.ceil(this.title.zsjf.countNum/10);
      for (let i=1;i<nb1+1;i++){
        if(i>1){
          this.sl2.push(i);
        }
      }
      $(document).ready(function(){
        $('.jftca').click(function(){
          $('.jfgztc').addClass('select');
        });
        $('.jfgztc .close').click(function(){
          $('.jfgztc').removeClass('select');
        });

      });

      if(this.$route.query.name == 'giving'){
        this.select = 0;
        $('.hh-grzx .div3 .li1').addClass('select');
      }else if(this.$route.query.name == 'cumulative'){
        this.select = 1;
      }else if(this.$route.query.name == 'use'){
        this.select = 2;
        $('.hh-grzx .div3 .li2').addClass('select');
      }else if(this.$route.query.name == 'remaining'){
        this.select = 2;
      }


    },
    methods:{
      qh:function(e){
        this.select = e;
      },
      qh2:function(e){
        this.sl3 = e;
      },
      qh3:function(e){
        this.sl4 = e;
      },
      syy:function(){
        if(this.sl3>0){
          this.sl3= this.sl3-1;
        }
      },
      xyy:function(){
        var nb =  Math.ceil(this.title.ysy.countNum/10);
        if(this.sl3<nb-1){
          this.sl3= this.sl3+1;
        }
      },
      syy2:function(){
        if(this.sl3>0){
          this.sl3= this.sl3-1;
        }
      },
      xyy2:function(){
        var nb =  Math.ceil(this.title.zsjf.countNum/10);
        if(this.sl3<nb-1){
          this.sl3= this.sl3+1;
        }
      }
    },watch:{
      select:function(){
        if(this.select == 0){
          $('.nrct .left div li').removeClass('select');
          $('.nrct .left .div3 .li1').addClass('select');
            $('.wdqb .ct2').removeClass('select');
            $('.wdqb .tp li').removeClass('select');
            $('.wdqb .tp .li1').addClass('select');
            $('.wdqb .ct1').addClass('select');
            $('.wdqb .tb2 th.th2').text('积分来源');
            $('.wdqb .tb2 .td3').removeClass('select');
        }else if(this.select == 1){
          $('.nrct .left div li').removeClass('select');
          $('.nrct .left .div3 .li2').addClass('select');
            $('.wdqb .ct1').removeClass('select');
            $('.wdqb .tp li').removeClass('select');
            $('.wdqb .tp .li2').addClass('select');
            $('.wdqb .ct2').addClass('select');
            $('.wdqb .tb2 th.th2').text('积分来源');
            $('.wdqb .tb2 .td3').removeClass('select');
        }else if(this.select == 2){
          $('.nrct .left div li').removeClass('select');
          $('.nrct .left .div3 .li2').addClass('select');
            $('.wdqb .ct1').removeClass('select');
            $('.wdqb .tp li').removeClass('select');
            $('.wdqb .tp .li3').addClass('select');
            $('.wdqb .ct2').addClass('select');
            $('.wdqb .tb2 th.th2').text('积分来源');
            $('.wdqb .tb2 .td3').addClass('select');
        }else if(this.select == 3){
            $('.wdqb .ct1').removeClass('select');
            $('.wdqb .tp li').removeClass('select');
            $('.wdqb .tp .li2').addClass('select');
            $('.wdqb .ct2').addClass('select');
            $('.wdqb .tb2 th.th2').text('用途');
            $('.wdqb .tb2 .td3').addClass('select');
        }


      },
      // foobar:function(){
      //   if(this.foobar){
      //     this.select = this.foobar;
      //   }
      // }
      "$route": function(){
        //路由变化会触发
        if(this.$route.query.name == 'giving'){
          this.select = 0;
        }else if(this.$route.query.name == 'cumulative'){
          this.select = 1;
        }else if(this.$route.query.name == 'use'){
          this.select = 2;
        }else if(this.$route.query.name == 'remaining'){
          this.select = 3;
        }
      }
    }
  }
</script>

<style>

</style>
